<template>
	<view class="page ex-mall-tab-page" :class="[$themeClass('panel-content-bg-color')]">
		<view class="header-fill">
			<!-- #ifdef MP-WEIXIN -->
			<view class="ex-mall-header-mp-weixin-fill">购物车</view>
			<!-- #endif -->
		</view>

		<view class="container">
			<view class="header">
				<view class="title">购物车</view>
				<view class="btns">
					<view class="btn checked-all ex-mall-header-btn" :class="[$themeClass('header-btn-left-bg-color')]" @click="checkedAll">
						<text class="icon ex-mall-header-btn-icon" :class="[isCheckedAll?'ri-check-line':'ri-checkbox-blank-line', $themeClass('header-btn-left-icon-color')]"></text>
					</view>
					<view class="btn remove ex-mall-header-btn" :class="[$themeClass('header-btn-left-further-bg-color')]" @click="isRemoveEdit=!isRemoveEdit">
						<text class="icon ex-mall-header-btn-icon" :class="[isRemoveEdit?'ri-close-line':'ri-delete-bin-line', $themeClass('header-btn-left-icon-further-color')]"></text>
					</view>
				</view>
			</view>
			<view class="content list">
				<view class="item" v-for="(x, xi) in carts" :key="xi">
					<view class="left">
						<view class="checkbox">
							<view class="icon" @click="toggleChecked(x)" :class="[x.checked?'ri-checkbox-fill '+$themeClass('checkbox-color'):'ri-checkbox-blank-line']"></view>
						</view>
						<view class="thumbnail">
							<image class="img" :src="'http://localhost:8888/'+x.goods_big_logo" mode="aspectFill"></image>
						</view>
						<view class="info">
							<view class="title">{{x.goods_name}}<text class="spec">{{x.spec}}</text></view>
							<view class="price">￥{{x.goods_price}}</view>
						</view>
					</view>
					<view class="right">
						<view class="numberbox">
							<view class="icon plus ri-add-line" @click="quantityPlus(x)" :class="[$themeClass('checkbox-color')]"></view>
							<!-- #ifdef MP-WEIXIN -->
							<input class="input" type="number" :data-index="xi" :value="x.count" @blur="inputBlur" />
							<!-- #endif -->
							<!-- #ifndef MP-WEIXIN -->
							<input class="input" v-if="x.inputting" :focus="x.inputting" type="number" :data-index="xi" :value="x.count" @blur="inputBlur" />
							<view class="input" v-else @click="inputClick(x)">{{x.count}}</view>
							<!-- #endif -->
							<view class="icon minus ri-subtract-line" @click="quantityMinus(x)"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="submit" v-if="!isRemoveEdit">
				<view class="btn" @click="$util.toLinkPage('/pages/order/create')" :class="[$themeClass('search-btn-bg-color'), $themeClass('search-btn-color')]">
					<view class="label">提交订单</view>
					<view class="amount">￥{{totalAmount.toFixed(2)}}</view>
				</view>
			</view>
			<view class="remove" v-else>
				<view class="btn" @click="deleteCart" :class="[$themeClass('search-btn-bg-color'), $themeClass('search-btn-color')]">删除选中</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '@/config'
	export default {
		data() {
			return {
				isCheckedAll: false,
				isRemoveEdit: false,
				totalAmount: 0,
				//选中的数据
				isChecked:{},
				// {
				// 	id: '10000001',
				// 	thumbnail: '',
				// 	title: '时尚女士鞋',
				// 	price: 192.00,
				// 	spec: '颜色米白 尺码41',
				// 	quantity: 1,
				// 	stock: 5
				// }
				carts: []
			}
		},
		mounted() {
			this.load()
			this.getShopCart()
			this.$emit('loaded', {
				name: 'shoppingcart'
			})
		},
		methods: {
			load() {
				console.log('shoppingcart on load')
			},
			show() {
				console.log('shoppingcart on show')
			},
			getShopCart(){
				let userInfo = uni.getStorageSync('userInfo')
				uni.request({
					url: config.baseUrl+'/shopCart/' + userInfo.id,
					method: 'get',
					header: {
						"Authorization": uni.getStorageSync('token')
					},
					success: res => {
						//guanbitishi
						console.log(res.data.data,'购物车')
						this.carts = res.data.data
					}
				})
			},
			checkedAll() {
				if (this.isCheckedAll) {
					this.isCheckedAll = false
					this.carts.forEach(x => this.$set(x, 'checked', false))
				} else {
					this.isCheckedAll = true
					this.carts.forEach(x => this.$set(x, 'checked', true))
				}
				this.calcTotal()
			},
			toggleChecked(cartItem) {
				//有个bug 稍后修复 todo
				this.isChecked = cartItem
				var checked = !cartItem.checked
				this.$set(cartItem, 'checked', checked)
				if (checked) {
					if (this.carts.filter(x => x.checked).length === this.carts.length) {
						this.isCheckedAll = true
					}
				} else {
					this.isCheckedAll = false
				}
				this.calcTotal()
			},
			quantityPlus(cartItem) {
				if (!cartItem.stock || cartItem.quantity < cartItem.stock) {
					cartItem.count++
					this.updateCart(cartItem)
				}
				this.calcTotal()
			},
			quantityMinus(cartItem) {
				if (cartItem.count > 1) {
					cartItem.count--
					this.updateCart(cartItem)
				}
				this.calcTotal()
			},
			//更新购物车数量
			updateCart(cartItem) {
				console.log(cartItem,'更新购物车数量')
				uni.request({
					url: config.baseUrl + '/shopCart/' + cartItem.id ,
					method: 'post',
					data: {
						count: cartItem.count
					},
					header: {
						"Authorization": uni.getStorageSync('token')
					}
				})
			},
			//删除购物车数据
			deleteCart() {
				uni.request({
					url: config.baseUrl + '/shopCart/' + this.isChecked.id ,
					method: 'delete',
					header: {
						"Authorization": uni.getStorageSync('token')
					},
					success: res => {
						console.log(res.data,'删除购物车数据')
						this.getShopCart()
					}
				})
			},
			inputClick(cartItem) {
				this.$set(cartItem, 'inputting', true)
			},
			inputBlur(e) {
				var cartItem = this.carts[e.currentTarget.dataset.index]
				let value = e.detail.value
				cartItem.quantity = value
				if (!/(^\d+$)/.test(value) || value[0] == 0) value = 1
				if (value > cartItem.stock) {
					value = cartItem.stock
				} else if (value < 1) {
					value = 1
				}
				this.$nextTick(() => {
					cartItem.quantity = parseInt(value)
					cartItem.inputting = false
				})
				this.calcTotal()
			},
			calcTotal() {
				var totalAmount = 0
				this.carts.filter(x => x.checked).forEach(x => totalAmount += x.goods_price * x.count)
				this.totalAmount = totalAmount
			}
		}
	}
</script>

<style lang="scss">
	.page {
		&>.header-fill {
			padding: 0 28px;
			padding-top: calc(16px + var(--status-bar-height));
			background-color: #FFFFFF;
			
			&>.ex-mall-header-mp-weixin-fill {
				color: #3D3D3D;
			}
		}

		&>.container {
			/* #ifndef MP-WEIXIN */
			height: calc(100vh - 78px - 114px - 16px - var(--status-bar-height));
			/* #endif */
			/* #ifdef MP-WEIXIN */
			height: calc(100vh - 78px - 114px - 16px - var(--status-bar-height) - 50px);
			/* #endif */
			background-color: #FFFFFF;
			border-radius: 0 0 2em 2em;
			overflow-y: scroll;

			&>.header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 12px 28px 28px 28px;
				background-color: #FFFFFF;

				&>.title {
					font-size: 28px;
					font-weight: 600;
				}

				&>.btns {
					display: flex;

					&>.btn {
						margin-left: 16px;
					}
				}
			}

			&>.content.list {
				padding-top: 10px;

				&>.item {
					display: flex;
					justify-content: space-between;
					padding: 0 28px 28px 28px;

					&:nth-child(4n-3) {
						&>.left {
							&>.thumbnail {
								&>.img {
									background-color: #0EAA90;
								}
							}
						}
					}

					&:nth-child(4n-2) {
						&>.left {
							&>.thumbnail {
								&>.img {
									background-color: #F8E3DC;
								}
							}
						}
					}

					&:nth-child(4n-1) {
						&>.left {
							&>.thumbnail {
								&>.img {
									background-color: #A8A8A9;
								}
							}
						}
					}

					&:nth-child(4n) {
						&>.left {
							&>.thumbnail {
								&>.img {
									background-color: #7F8688;
								}
							}
						}
					}

					&>.left {
						display: flex;
						align-items: center;
						flex: 1;

						&>.checkbox {
							&>.icon {
								font-size: 20px;
								color: #9093A2;
							}
						}

						&>.thumbnail {
							margin-left: 12px;

							&>.img {
								display: block;
								width: 88px;
								height: 88px;
								border-radius: 12px;
							}
						}

						&>.info {
							margin: 0 18px;
							line-height: 1;

							&>.title {
								line-height: 1.3;
								font-size: 15px;
								font-weight: 600;

								&>.spec {
									margin-left: 0.5em;
									color: #808080;
								}
							}

							&>.price {
								margin-top: 10px;
								font-size: 13px;
							}
						}
					}

					&>.right {
						height: 88px;
						background-color: #F7F7F7;
						border-radius: 12px;
						overflow: hidden;

						&>.numberbox {
							display: flex;
							flex-direction: column;

							&>.icon {
								display: flex;
								justify-content: center;
								align-items: center;
								width: 48px;
								height: 35px;
								font-size: 18px;
								font-weight: bold;

								&.plus {
									color: #61DAD5;
								}

								&.minus {
									color: #9093A2;
								}
							}

							&>.input {
								display: flex;
								justify-content: center;
								align-items: center;
								width: 48px;
								height: 18px;
								padding: 0 4px;
								text-align: center;
								font-size: 13px;
								color: #666666;
								box-sizing: border-box;
							}
						}
					}
				}
			}
		}

		&>.footer {
			padding: 28px;

			.btn {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				height: 58px;
				padding: 0 28px;
				border-radius: 12px;
				box-sizing: border-box;
			}

			&>.submit {
				&>.label {
					font-size: 15px;
					font-weight: 600;
				}

				&>.amount {
					font-size: 14px;
				}
			}

			&>.remove {
				&>.btn {
					justify-content: center;
				}
			}
		}
	}
</style>
